<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /*
        
          解决跨域问题
                    1-  (后端配置)通过服务器配置响应头（cors） 来允许跨域
                        cors 跨域资源共享策略--在服务器配置响应头 
                            Access-Control-Allow-Origin：*
                            允许访问的来源网站：*  允许所有网站访问 这个接口
                            允许访问的来源网站：a.com  允许a.com网站访问 这个接口
                        

                

                    2-代理服务器
                    3-代理插件    

                    4-jsonp （用的很少--早期--目前-搜索公司在用）
                        前端利用script标签的src属性，发起请求
                        script的src属性自带跨域能力

                        百度返回的js文件， 利用调用了一个函数，传入实参（对象-搜索结果）

                        通过src 里面的网址  
                             callback=函数名 （百度返回的js文件就会调用对应的函数名）
                             wd=搜索的词 

                      jsonp--动态创建script标签 -利用src的跨域能力       、

        */


    </script>
    <script>
        // 只要js文件加载成功，相当于执行js文件的代码，就会调用 js文件里面的函数
        // 前端要提前定义好这个函数---函数名
        function fn(r) {
            console.log(r);
        }
    </script>
    <script
        src="https://www.baidu.com/sugrec?callback=fn&prod=pc_hao123&wd=你好&pre=1&p=3&ie=utf-8&json=1&from=pc_hao123&_=1695625253559"></script>



    <input type="text" name="" id="">
    <ul>
        <li><a href="https://www.baidu.com/s?word=a顾">a顾</a></li>
    </ul>
    <script>
        /* 
         监听iput的 input事件， 创建script标签
         */
        let ipt = document.querySelector('input');
        function box(res) {
            console.log(res);
            // 获取了搜索结果
            if (res.g) {
                let liStr = res.g.map(v => `<li><a href="https://www.baidu.com/s?word=${v.q}">${v.q}</a></li>`).join('');

                document.querySelector('ul').innerHTML = liStr;
            } else {
                document.querySelector('ul').innerHTML = '';

            }
        }

        ipt.oninput = function () {
            //输入事件
            let src = `https://www.baidu.com/sugrec?callback=box&prod=pc_hao123&wd=${ipt.value}&pre=1&p=3&ie=utf-8&json=1&from=pc_hao123&_=1695625253559`
            // 创建script 标签-执行src属性，添加到页面中
            let script = document.createElement('script');
            script.src = src;
            document.body.appendChild(script)

        }

    </script>
</body>

</html>